<script setup>
import {ref, watch} from 'vue'

const props = defineProps({
    title: {
        type: String,
        required: true,
        default: '基本信息'
    },
    icon: {
        type: String,
        required: true,
        default: 'Plus'
    }
})

const emit = defineEmits(['update:title'])
const localTitle = ref(props.title)

watch(localTitle, (newValue) => {
    emit('update:title', newValue)
})

watch(() => props.title, (newValue) => {
    localTitle.value = newValue
})
</script>

<template>
    <div class="title-mian">
        <div class="title-icon icon-container">
            <el-icon>
                <component :is="icon" />
            </el-icon>
        </div>
        <div class="title-body">
            <div class="title-text">
                <el-input v-model="localTitle"  />
            </div>
            <div class="edit-icon icon-container">
                <el-icon>
                    <EditPen />
                </el-icon>
            </div>
        </div>
    </div>
</template>

<style scoped>

.title-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.title-mian {
    background-color: rgba(23, 23, 23, 0.5);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    gap: 10px;
    border: 1px solid rgb(38, 38, 38);
}

.edit-icon {
    color: var(--el-color-primary);
    cursor: pointer;
    font-size: 20px;
}
.title-icon{
    font-size: 20px;
}
/* 新增的样式用于去除输入框背景 */
:deep(.el-input__wrapper) {
    background-color: transparent !important;
    box-shadow: none !important;
    
}
:deep(.el-input__inner) {
    color: rgb(243, 244, 246) !important;
    width: 100%;
    height: 100%;
    font-size: 20px;
    
}
</style>
